<template>
  <div id="console">
    <Layout>
      <Sider hide-trigger width="100">
        <ems-nav
          @gotoDisplay="gotoDisplay"
          @gotoRouter="gotoRouter"
          :routerArr="routerArr"
          :navActive="navActive"
        >
        </ems-nav>
      </Sider>
      <Layout>
        <Header>
          <ems-header
            :spaceList="spaceList"
            @changeWorkSpace="changeWorkSpace"
            :valueList="valueList"
            @onSelect="onSelect"
            :isTimeFlag="false"
            :datePicker="activeDate"
            @dayClick="dayClick"
            @monthClick="monthClick"
            @yearClick="yearClick"
            @tapBtn="tapBtn"
            :btnText="btnText"
            :activeDateBtn="activeDateBtn">
          </ems-header>
          <!--          <Cascader :data="spaceList" change-on-select @on-change="changeWorkSpace"></Cascader>-->
        </Header>
        <Content>
          <router-view ref="child">
          </router-view>
        </Content>
        <!--        <Footer>Footer</Footer>-->
      </Layout>
    </Layout>
    <!--    <m-header :data="data"-->
    <!--              :systemName="systemName"-->
    <!--              :activeName="activeName"-->
    <!--              :isSelect="false"-->
    <!--              @onSelectMenu="onSelectMenu">-->
    <!--    </m-header>-->
    <!--    <div id="console-date">-->
    <!--      <div></div>-->
    <!--      <div>-->
    <!--        <m-date-->
    <!--          :isTimeFlag="false"-->
    <!--          ref="mDate"-->
    <!--          :datePicker="activeDate"-->
    <!--          @dayClick="dayClick"-->
    <!--          @monthClick="monthClick"-->
    <!--          @yearClick="yearClick"-->
    <!--        >-->
    <!--        </m-date>-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        <time-btn @changeBtn="tapBtn" :btnText="btnText" :activeDateBtn="activeDateBtn"></time-btn>-->
    <!--      </div>-->
    <!--      <div v-show="activeName === 'energyOverview'">-->
    <!--        <Button style="width: 80px;height: 40px" :type="currentTab === 'chart' ? 'warning' : 'primary'" @click="clickChart">图表-->
    <!--        </Button>-->
    <!--        <Button style="width: 80px;height: 40px;margin: 0 8px" :type="currentTab === 'report' ? 'warning' : 'primary'" @click="clickReport">报表-->
    <!--        </Button>-->
    <!--        <Button style="width: 80px;height: 40px" v-show="currentTab === 'report'" type="primary" @click="post_carbon_dform">导出报表</Button>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <router-view ref="child">-->

    <!--    </router-view>-->
  </div>
</template>

<script>
  // import MHeader from '../../components/common/mHeader'
  // import mDate from '../../components/common/mDate'
  // import timeBtn from '../../components/common/timeBtn'
  import {formatDate} from '../../util/date'
  import {mapState, mapActions} from 'vuex'
  import EmsHeader from '../../components/common/emsHeader'
  import EmsNav from '../../components/common/emsNav'

  export default {
    name: 'console',
    props: {},
    data () {
      return {
        // 今日，本月，今年 组件
        btnText: ['今日', '本月', '今年']
        // end
        // systemName: '智慧能耗管理系统',
        // activeName: 'energyOverview',
        // 导航菜单
        // data: [
        //   {
        //     name: 'energyOverview',
        //     text: '总览',
        //     src1: require('../../assets/navicon/energyOverview_b.png'),
        //     src: require('../../assets/navicon/energyOverview_w.png'),
        //     isMouse: false
        //   },
        //   {
        //     name: 'collectChart',
        //     text: '碳排',
        //     src1: require('../../assets/navicon/collectChart_b.png'),
        //     src: require('../../assets/navicon/collectChart_w.png'),
        //     isMouse: false
        //   },
        //   {
        //     name: 'costPools',
        //     text: '成本',
        //     src1: require('../../assets/navicon/costPools_b.png'),
        //     src: require('../../assets/navicon/costPools_w.png'),
        //     isMouse: false
        //   },
        //   {
        //     name: 'aggregateWaters',
        //     text: '用水',
        //     src1: require('../../assets/navicon/aggregateWaters_b.png'),
        //     src: require('../../assets/navicon/aggregateWaters_w.png'),
        //     isMouse: false
        //   },
        //   {
        //     name: 'aggregateElectricitys',
        //     text: '用电',
        //     src1: require('../../assets/navicon/aggregateElectricitys_b.png'),
        //     src: require('../../assets/navicon/aggregateElectricitys_w.png'),
        //     isMouse: false
        //   },
        //   {
        //     name: 'aggregateGass',
        //     text: '燃气',
        //     src1: require('../../assets/navicon/aggregateGass_b.png'),
        //     src: require('../../assets/navicon/aggregateGass_w.png'),
        //     isMouse: false
        //   },
        //   {
        //     name: 'aggregateCoolings',
        //     text: '冷量',
        //     src1: require('../../assets/navicon/aggregateCoolings_b.png'),
        //     src: require('../../assets/navicon/aggregateCoolings_w.png'),
        //     isMouse: false
        //   },
        //   {
        //     name: 'summarySteams',
        //     text: '蒸汽',
        //     src1: require('../../assets/navicon/summarySteams_b.png'),
        //     src: require('../../assets/navicon/summarySteams_w.png'),
        //     isMouse: false
        //   },
        //   {
        //     name: 'airCollectionss',
        //     text: '空气',
        //     src1: require('../../assets/navicon/airCollectionss_b.png'),
        //     src: require('../../assets/navicon/airCollectionss_w.png'),
        //     isMouse: false
        //   }
        // ]
      }
    },

    created () {

    },
    watch: {
      '$route': 'activePath'
    },
    mounted () {
      // this.activeName = this.$route.name
      // this.currentChangeTab('chart')
      // this.activeChangeDate(formatDate(new Date(), 'yyyy'))
      // this.activeChangeDateBtn('今年')
    },
    computed: {
      // ...mapState('comDate', {
      //   activeDate: state => state.activeDate,
      //   currentTab: state => state.currentTab,
      //   activeDateBtn: state => state.activeDateBtn
      // })
      ...mapState('newEms', {
        spaceList: state => state.spaceList,
        routerArr: state => state.routerArr,
        navActive: state => state.navActive,
        workSpaceName: state => state.workSpaceName,
        valueList: state => state.valueList,
        activeDate: state => state.activeDate,
        activeDateBtn: state => state.activeDateBtn
      })
    },
    methods: {
      // 路由 变化的 时候 菜单跟着变化
      activePath () {
        if (this.$route.name) {
          this.navAction(this.$route.name)
        }
      },
      // 子路由 菜单的 点击事件
      // onSelectMenu (item) {
      //   this.activeName = item.name
      //   this.$router.push({
      //     name: item.name
      //   })
      // },
      // ...mapActions('comDate', [
      //   'currentChangeTab',
      //   'activeChangeDate',
      //   'activeChangeDateBtn'
      // ]),
      dayClick (param) {
        this.activeChangeDate(param)
        this.activeChangeDateBtn('')
        this.$refs.child.refreshData()
      },
      monthClick (param) {
        this.activeChangeDate(param)
        this.activeChangeDateBtn('')
        this.$refs.child.refreshData()
      },
      yearClick (param) {
        this.activeChangeDate(param)
        this.activeChangeDateBtn('')
        this.$refs.child.refreshData()
      },
      // 点击时间按钮
      tapBtn (prop) {
        console.log(prop)
        if (prop === this.activeDateBtn) return
        this.activeChangeDateBtn(prop)
        let fmt = ''
        switch (prop) {
          case '今日':
            fmt = 'yyyy-MM-dd'
            break
          case '本月':
            fmt = 'yyyy-MM'
            break
          case '今年':
            fmt = 'yyyy'
            break
        }
        let param = formatDate(new Date(), fmt)
        this.activeChangeDate(param)
        this.$refs.child.refreshData()
      },
      // xxx能耗总揽--下载报表
      post_carbon_dform: function () {
        // todo 补充传参
        window.myapi.do_download('$carbon/dform', {
          time: this.activeDate,
          workSpace: this.$refs.child.workSpace
        }).then(resp => {
          if (resp.status === 200 && resp.data) {
            let url = window.URL.createObjectURL(new Blob([resp.data], {type: resp.data.type}))
            let filename = decodeURI(resp.headers['content-disposition'].split(';')[1].trim().substr(
              'filename='.length))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', filename)

            document.body.appendChild(link)
            link.click()
          }
        }).finally(() => {
          // this.downLoading = false
        })
      },
      // 点击报表
      // clickReport () {
      //   this.currentChangeTab('report')
      //   this.$refs.child.post_form(this.activeDate, this.$refs.child.workSpaceString)
      // },
      // 点击图表
      // clickChart () {
      //   this.currentChangeTab('chart')
      // },
      /*
      * 8月26日 新需求
      * */
      ...mapActions('newEms', [
        'valueListAction',
        'strAction',
        'navAction',
        'routerArrAction',
        'activeChangeDate',
        'activeChangeDateBtn'
      ]),
      // 空间改变
      changeWorkSpace (workSpace, selectedData) {
        // 空间值的数组
        this.valueListAction(workSpace)
        if (selectedData.length < 2) {
          this.strAction(selectedData[0].label)
        } else {
          let str = selectedData.map(item => item.label).join('/')
          // 空间后端需要的 参数字符串
          this.strAction(str)
        }
        // 改变空间后, 左侧导航也要请求接口变化
        this.routerChange()
      },
      // nav 路由 数组
      routerChange () {
        window.myapi.postNav({spaces: this.workSpaceName}).then(res => {
          if (res.data.status === 200) {
            let routerData = res.data.data.slice()
            let index = routerData.findIndex(item => item.name === 'energyOverview')
            if (index > -1) {
              routerData.splice(index, 1)
            }
            this.routerArrAction(routerData)
            // this.routerArrAction(res.data.data)
            // 重新请求后 nav 导航列表会变化, 找到了就什么都不做,没找到回到首页
            if (this.routerArr.findIndex(item => item.name === this.navActive) > -1) {
              // 判断 路由 是否是 二级 页面 的时候,  修改了 空间
              if (this.$route.path === '/console/carbonCost' || this.$route.path === '/console/otherEnergy' || this.$route.path === '/console/workShop') {
                this.$router.back()
              } else {
                // 所有 子路由  加载更新 数据
                this.$refs.child.refreshData()
              }
            } else {
              this.navAction(this.routerArr[0].name)
              // this.$router.push({path: '/console'})
              this.$router.push({path: this.routerArr[0].path})
            }
          }
        }).catch(function (e) {
          console.log(e)
        })
      },
      // 返回选择系统的方法
      gotoDisplay () {
        this.$router.push({path: '/display'})
      },
      // 左侧导航 跳转路由
      gotoRouter (item, index) {
        if (this.navActive === item.name) return false
        this.navAction(item.name)
        // if (!index) {
        //   this.$router.push({path: '/console/collectChart'})
        //   // this.$router.push({path: '/console'})
        // } else {
        this.$router.push({path: item.path})
        // }
      },
      // 右侧菜单 选择方法
      onSelect (selectItem) {
        if (selectItem === 'logout') {
          this.$store.commit('user/updateState', {user: ''})
          this.$router.push({
            name: 'login'
          })
        }
        if (selectItem === 'goLight') {
          this.$router.push({
            path: '/energy/total/allcb'
          })
        }
        if (selectItem === 'goIdefined') {
          this.$router.push({
            path: '/userDefined'
          })
        }
      }
    },
    destroyed () {

    },
    // components: {MHeader, mDate, timeBtn},
    components: {EmsNav, EmsHeader}
  }
</script>

<style lang='scss' scoped>
  #console {
    @include system-bg;
    position: relative;

    #console-date {
      width: 1800px;
      display: flex;
      margin: 0 auto;
      margin-bottom: 20px;

      div:nth-child(1) {
        flex: 0 0 500px;
      }

      div:nth-child(2) {
        flex: 0 0 440px;
      }

      div:nth-child(3) {
        flex: 0 0 320px;
      }

      div {
        flex: 1;
      }
    }

    .ivu-layout-sider {
      background-color: $color-146;
    }

    @media screen and (min-width: 1921px) {
      .ivu-layout-sider {
        background-color: $color-146;
        /*width: 200px !important;*/
        max-width: 110px !important;
        flex: 0 0 110px !important;
      }
    }

    .ivu-layout-header {
      background: url('../../assets/newEms/header_deep.png') no-repeat center center;
      background-size: 100% 100%;
      padding: 0 50px;
      height: 110px;
      line-height: 110px;
    }

    .ivu-layout-content {
      width: 100%;
      height: auto !important;
      background: url("../../assets/newEms/bg_down_deep.png") no-repeat center center;
      background-size: 100% 100%;
      /*background: rgba(35, 89, 188, 1)*/
    }
  }

  ul::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
    background: rgba(35, 89, 188, 1)
  }
</style>
